Polar Area Chart একটি বিশেষ ধরনের চার্ট যা ডেটাকে পোলার কোঅর্ডিনেট সিস্টেমে প্রদর্শন করে। এটি সাধারণত ব্যবহৃত হয় যখন আপনি একাধিক ভিন্ন ভিন্ন মানের পার্থক্য দেখাতে চান, যেখানে প্রতিটি সেগমেন্ট একটি নির্দিষ্ট ডেটা পয়েন্টের প্রতিনিধিত্ব করে। Polar Area Chart সাধারণত সেগমেন্টের আকারের মাধ্যমে ডেটার পরিমাণ বোঝায়।
Polar Area Chart এর গঠন
Polar Area Chart এর প্রতিটি সেগমেন্ট একটি ভিন্ন ভিন্ন ডেটা পয়েন্টকে প্রতিনিধিত্ব করে। এটি রাডার চার্ট এর মতো, তবে এতে কেন্দ্র থেকে সেগমেন্টগুলি প্রতিস্থাপিত হয়। Polar Area Chart সাধারণত শূন্য থেকে একটি সর্বোচ্চ মানের মধ্যে বিশ্লেষণ করার জন্য ব্যবহৃত হয়।
Polar Area Chart তৈরি করার উদাহরণ
এখানে একটি উদাহরণ দেয়া হলো যেখানে Polar Area Chart ব্যবহার করে বিভিন্ন রঙের ডেটা সেগমেন্টের মাধ্যমে ভোটের ফলাফল ভিজ্যুয়ালাইজ করা হয়েছে।
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polar Area Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Polar Area Chart Example</h1>
<canvas id="polarAreaChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
// Get the context of the canvas element
const ctx = document.getElementById('polarAreaChart').getContext('2d');
// Create the Polar Area Chart
const polarAreaChart = new Chart(ctx, {
type: 'polarArea', // Chart type
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Labels for each segment
datasets: [{
label: 'Votes', // Label for the dataset
data: [15, 25, 10, 30, 20], // Data for each segment (percentage or count)
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // Red
'rgba(54, 162, 235, 0.2)', // Blue
'rgba(255, 206, 86, 0.2)', // Yellow
'rgba(75, 192, 192, 0.2)', // Green
'rgba(153, 102, 255, 0.2)' // Purple
],
borderColor: [
'rgba(255, 99, 132, 1)', // Red border
'rgba(54, 162, 235, 1)', // Blue border
'rgba(255, 206, 86, 1)', // Yellow border
'rgba(75, 192, 192, 1)', // Green border
'rgba(153, 102, 255, 1)' // Purple border
],
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
plugins: {
legend: {
position: 'top', // Legend position
display: true // Display the legend
}
}
}
});
বর্ণনা:
type: 'polarArea': এটি Polar Area Chart তৈরি করার জন্য Chart.js এর মধ্যে একটি চার্ট টাইপ।polarAreaচার্টে, প্রতিটি সেগমেন্টের আকার তার ডেটা ভ্যালু অনুযায়ী পরিবর্তিত হয়।labels: এই অ্যারেটি X-অক্ষের লেবেল হিসেবে কাজ করে, প্রতিটি সেগমেন্টের নাম প্রদান করে। এখানে, ‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, এবং ‘Purple’ নির্বাচিত হয়েছে।data: এখানে প্রতিটি সেগমেন্টের মানের জন্য ডেটা প্রদান করা হয়েছে, যেমন 15, 25, 10, 30, এবং 20, যা সেগমেন্টের আকার নির্ধারণ করবে।backgroundColor: প্রতিটি সেগমেন্টের পটভূমি রঙ নির্ধারণ করা হয়। প্রতিটি সেগমেন্টের জন্য একটি আলাদা রঙ দেওয়া হয়েছে।borderColor: সেগমেন্টের বর্ডারের রঙ নির্ধারণ করা হয়েছে। এটি সেগমেন্টের আউটার বর্ডারকে উপস্থাপন করবে।borderWidth: সেগমেন্টের বর্ডারের প্রস্থ। এখানে প্রস্থ ১ পিক্সেল নির্ধারণ করা হয়েছে।options:responsive: এটিকেtrueকরা হলে, চার্টটি স্ক্রিন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে রিসাইজ হবে।plugins.legend: লেজেন্ড (Legend) কাস্টমাইজেশন করা হয়, যেখানে লেজেন্ডটি চার্টের উপরের দিকে প্রদর্শিত হবে।
Polar Area Chart এর ব্যবহার
Polar Area Chart সাধারণত ব্যবহৃত হয়:
- ভোটের ফলাফল: নির্বাচন বা ভোটের ফলাফল ভিজ্যুয়ালাইজ করার জন্য।
- বাজার শেয়ার বিশ্লেষণ: বিভিন্ন কোম্পানির বাজার শেয়ার তুলনা করতে।
- পরিসংখ্যান বিশ্লেষণ: কোন কোন অংশে কতটুকু অবদান রয়েছে তা প্রকাশ করতে।
সারাংশ
Polar Area Chart Chart.js এর একটি বিশেষ ধরনের চার্ট যা বিভিন্ন ডেটা পয়েন্টের পার্থক্য দেখতে সাহায্য করে। এটি অনেক ক্ষেত্রেই ডেটার মধ্যে অংশবিশেষ তুলে ধরতে কার্যকর, বিশেষ করে যখন আপনি প্রতিটি অংশের অনুপাত বা পরিমাণ দেখতে চান। Chart.js এর সাহায্যে Polar Area Chart তৈরি করা খুবই সহজ এবং ডেটা ভিজ্যুয়ালাইজেশনের জন্য এটি একটি চমৎকার টুল।
Read more
